<template>
    <div class="message-container">
        <!-- 消息列表卡片 -->
        <el-card 
            class="message-list" 
            shadow="never"
            v-infinite-scroll="loadMore"
            :infinite-scroll-disabled="loading"
            :infinite-scroll-distance="10"
        >
            <!-- 消息列表循环 -->
            <div v-for="(item, index) in noticeList" 
                 :key="index" 
                 class="message-item"
            >
                <!-- 用户信息区域：头像和用户名 -->
                <div class="user-info">
                    <el-avatar 
                        :size="40" 
                        :src="item.adminVo.userFace"
                        class="user-avatar"
                    />
                    <span class="user-name">{{ item.adminVo.userName }}</span>
                </div>
                <!-- 消息内容区域：动作和评论 -->
                <div class="message-content">
                    <span class="action">{{ item.action }}</span>
                    <!-- 如果是文章评论类型且评论存在，则显示评论内容 -->
                    <template v-if="item.targetType === 'article_comment_' && item.comment">
                        <span class="comment">{{ item.comment.content }}</span>
                    </template>
                </div>
                <!-- 时间显示区域 -->
                <div class="message-time">
                    {{ item.createTime }}
                </div>
            </div>
            <!-- 加载状态提示 -->
            <div v-if="loading" class="loading-text">加载中...</div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "Message",
    data() {
        return {
            // API接口对象
            api: this.$store.getters.app.api,
            // 分页参数
            params: {
                pageNum: 1,    // 当前页码
                pageSize: 10   // 每页数量
            },
            // 消息列表数据
            noticeList: [],
            // 加载状态标志
            loading: false,
            // 是否还有更多数据
            hasMore: true
        }
    },
    // 组件创建时获取初始数据
    created() {
        this.getNoticeList()
    },
    methods: {
        /**
         * 查询前的参数处理
         * @returns {Object} 查询参数
         */
        beforeSearch() {
            return this.params
        },

        /**
         * 获取消息列表数据
         * @returns {Promise<void>}
         */
        async getNoticeList() {
            // 如果正在加载或没有更多数据，则返回
            if (this.loading || !this.hasMore) return
            
            this.loading = true
            try {
                // 调用接口获取数据
                const res = await this.api.article.getNotice(this.params)
                if (res.code === 200) {
                    const list = res.data.list || []
                    if (list.length > 0) {
                        // 第一页直接赋值，其他页追加数据
                        if (this.params.pageNum === 1) {
                            this.noticeList = list
                        } else {
                            this.noticeList = [...this.noticeList, ...list]
                        }
                        // 页码加1，准备下一页
                        this.params.pageNum++
                    } else {
                        // 没有更多数据
                        this.hasMore = false
                    }
                }
            } catch (error) {
                console.error('获取消息列表失败:', error)
            } finally {
                this.loading = false
            }
        },

        /**
         * 无限滚动加载更多数据
         */
        loadMore() {
            this.getNoticeList()
        }
    }
}
</script>

<style scoped>
/* 容器样式：占满高度并使用flex布局 */
.message-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 消息列表卡片：自适应高度和滚动 */
.message-list {
    flex: 1;
    border: none;
    overflow-y: auto;
}

/* 卡片内容区域样式 */
:deep(.el-card__body) {
    padding: 0;
    height: 100%;
}

/* 单个消息项样式 */
.message-item {
    padding: 16px;
    border-bottom: 1px solid #EBEEF5;
    background: #fff;
    transition: all 0.3s ease;
}

/* 最后一个消息项去除底部边框 */
.message-item:last-child {
    border-bottom: none;
}

/* 消息项悬停效果 */
.message-item:hover {
    background: #f5f7fa;
}

/* 用户信息区域：使用flex布局对齐 */
.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* 用户头像样式 */
.user-avatar {
    margin-right: 12px;
}

/* 用户名样式 */
.user-name {
    font-size: 14px;
    font-weight: 500;
    color: #409EFF;
}

/* 消息内容区域：缩进对齐 */
.message-content {
    padding-left: 52px;
    margin-bottom: 8px;
    line-height: 1.6;
    font-size: 14px;
}

/* 动作文本样式 */
.message-content .action {
    color: #606266;
}

/* 评论内容样式 */
.message-content .comment {
    color: #666;
    margin-left: 4px;
}

/* 时间显示样式 */
.message-time {
    padding-left: 52px;
    color: #909399;
    font-size: 12px;
}

/* 加载提示样式 */
.loading-text {
    text-align: center;
    color: #909399;
    padding: 12px 0;
    font-size: 13px;
}
</style>